<template>
	<view class="index-block">
		<u-calendar :minDate="minDate" :defaultDate="defaultDate" monthNum='24' @close="showspan=false" :show="showspan"
			@confirm="confirmspan" mode="range"></u-calendar>
		<u-datetime-picker :show="show" v-model="value1" mode="year-month" @confirm="confirm"
			@cancel="show=false"></u-datetime-picker>
		
		<view class="index-blick-title">
			<u-text v-if="!ismonth" :text="start+'到'+end" color="blue" size='20' @click="showspan=true" style="flex-grow: 2;"></u-text>
			<u-text v-if="ismonth" :text="year+'年'+month+'月'" color="blue" size='20' @click="show=true"
				suffixIcon='arrow-down-fill' style="flex-grow: 1"></u-text>
				<u-text :text="!ismonth?'按月份':'按时间段'" color="blue" size='20' @click="changeismonth()"
					suffixIcon='arrow-down-fill' style="flex-grow: 1"></u-text>
		</view>
		
		<u-grid :border="true" class="index-gird-box">
			<u-grid-item  @click="goimage"  class="index-gird-item">
				<u-text text="在建工程" color="blue" size='14' align="center"></u-text> <u-count-to fontSize='14' :startVal="0"
					:endVal="buildcount['在建工程']" ></u-count-to>
			</u-grid-item>
			<u-grid-item class="index-gird-item">
				<u-text text="总立项工程" color="brown" size='14' align="center"></u-text> <u-count-to fontSize='14' :startVal="0"
					:endVal="buildcount['总立项工程']" color="brown"></u-count-to>
			</u-grid-item>
			<u-grid-item class="index-gird-item">
				<u-text text="已派工未进场" color="darkorange" size='14' align="center"></u-text> <u-count-to fontSize='14' :startVal="0"
					:endVal="buildcount['已派工未进场施工']" color="darkorange"></u-count-to>
			</u-grid-item>


	
			<u-grid-item class="index-gird-item">
				<u-text text="今日施工工程" color="green" size='14' align="center"></u-text> <u-count-to fontSize='14' color="green"
					:startVal="0" :endVal="buildcount['今日施工工程']"></u-count-to>
			</u-grid-item>
			<u-grid-item class="index-gird-item">
				<u-text text="已巡检工程" color="fuchsia" size='14' align="center"></u-text> <u-count-to fontSize='14' color="fuchsia"
					:startVal="0" :endVal="buildcount['已巡检工程']"></u-count-to>
			</u-grid-item>
			<u-grid-item class="index-gird-item">
				<u-text text="未巡检工程" color="goldenrod" size='14' align="center"></u-text> <u-count-to fontSize='14' color="goldenrod"
					:startVal="0" :endVal="buildcount['未巡检工程']"></u-count-to>
			</u-grid-item>


			<u-grid-item class="index-gird-item">
				<u-text text="整改工单" color="#3e4549e6" size='14' align="center"></u-text> <u-count-to fontSize='14' color="#3e4549e6"
					:startVal="0" :endVal="buildcount['整改工单']"></u-count-to>
			</u-grid-item>
			<u-grid-item class="index-gird-item">
				<u-text text="未完成整改工单" color="goldenrod" size='14' align="center"></u-text> <u-count-to fontSize='14' color="goldenrod"
					:startVal="0" :endVal="buildcount['未完成整改工单']"></u-count-to>
			</u-grid-item>
			<u-grid-item class="index-gird-item">
				<u-text text="整改时限完成率" color="#1b3e76" size='14' align="center"></u-text>
				<u-text :text="`${buildcount['整改时限完成率']}%`" color="#1b3e76" align="center"></u-text></u-grid-item>
			<!-- <u-count-to fontSize='18' color="#1b3e76" :startVal="0" :endVal="buildcount['整改时限完成率']" ></u-count-to> -->
			<!-- </u-col> -->


	
			<u-grid-item class="index-gird-item">
				<u-text text="安全交底合格率" color="red" size='14' align="center"></u-text>
				<!-- <u-count-to fontSize='18'  color="red":startVal="0" :endVal="buildcount['安全交底合格率']" ></u-count-to> -->
				<u-text :text="`${buildcount['安全交底合格率']}%`" size='14' color="red" align="center"></u-text></u-grid-item>

			<u-grid-item  @click="openPage('sendwork/buildlist')" class="index-gird-item2">
				<u-text text="待派工" color="#f10606e6" size='14' align="center"></u-text> <u-count-to fontSize='14' color="#f10606e6"
					:startVal="0" :endVal="buildcount['待派工']"></u-count-to>
			</u-grid-item>
		
			<u-grid-item class="index-gird-item" v-if='user.UserRoleList[0].Role.Name=="管理员角色" || user.UserRoleList[0].Role.Name=="公司领导"'>
				<u-text text="工程收款" color="green" size='14' align="center"></u-text> <u-count-to mode="price" separator=","
					fontSize='14' color="green" :startVal="0" :endVal="buildcount['工程收款']"></u-count-to>
			</u-grid-item>
			
			<u-grid-item class="index-gird-item" v-if='user.UserRoleList[0].Role.Name=="管理员角色" || user.UserRoleList[0].Role.Name=="公司领导"'>
				<u-text text="工程劳务付款" color="red" size='14' align="center"></u-text>
				<!-- <u-count-to fontSize='18'  color="red":startVal="0" :endVal="buildcount['安全交底合格率']" ></u-count-to> -->
				<u-count-to :startVal="0" mode="price" :endVal="buildcount['工程付款']" separator="," fontSize='14'
					color="red"></u-count-to></u-grid-item>
		</u-grid>
		<!-- <u-row gutter="16">
			<u-col span="4">
				<view class="item-tj item-tj-frist">
					<view style="padding: 16rpx; height: 100%; position: relative;font-size: 16px;">
						<view style="display: flex; color: white;flex-direction: row;" @click="sendwxmsg">
							<u-icon name="photo" color="#fff"></u-icon>
							<text>在建</text>
						</view>
						<view style="position: absolute; bottom: 48rpx; right: 16rpx;">
							<u-count-to :startVal="0" :endVal="buildcount.on" :duration="1500" color="#fff"
								separator=","></u-count-to>
						</view>
					</view>
	 		</view>
	 	</u-col>
			<u-col span="4">
				<view class="item-tj item-tj-second">
					<view style="padding: 16rpx; height: 100%; position: relative;font-size: 16px; ">
						<view style="display: flex; color: white;   flex-direction: row;">
							<u-icon name="photo" color="#fff"></u-icon>
							<text>竣工</text>
						</view>
						<view style="position: absolute; bottom: 48rpx; right: 16rpx;">
							<u-count-to :startVal="1" :endVal="buildcount.finish" :duration="1500" color="#fff"
								separator=","></u-count-to>
						</view>
					</view>
				</view>
	 	</u-col>
			<u-col span="4">
				<view class="item-tj item-tj-thrid">
					<view style="padding: 16rpx; height: 100%; position: relative;font-size: 16px;">
						<view style="display: flex; color: white;flex-direction: row;">
							<u-icon name="photo" color="#fff"></u-icon>
							<text>总数</text>
						</view>
						<view style="position: absolute; bottom: 48rpx; right: 16rpx;">
							<u-count-to :startVal="1" :endVal="buildcount.all" :duration="1500" color="#fff"
								separator=","></u-count-to>
						</view>
					</view>
				</view>
	 	</u-col>
		</u-row> -->
		
		<view style="margin-top: 20px;">
			<u-text v-if="isShow" text="选择结算范围时间" size='20' @click="showCharts = true, isShow = false" suffixIcon='arrow-down-fill' color="blue"></u-text>
		<u-text v-if="!isShow" :text="start2+'到'+end2" size='20' @click="showCharts=true" color="blue" ></u-text>
		<u-calendar :minDate="minDate" :defaultDate="defaultDate" monthNum='24' @close="showCharts=false"
			:show="showCharts" @confirm="confirmCharts" mode="range"></u-calendar>
		</view>
		

		<view class="charts-text">
			本年结算情况
		</view>
		<view class="charts-box">
			<qiun-data-charts type="bar" :opts="opts" :chartData="IncomechartData" canvas2d="true" canvasId="canvasId1"/>
		</view>

		<view class="charts-text">
			本年劳务结算情况
		</view>
		<view class="charts-box">
			<qiun-data-charts type="bar" :opts="opts" :chartData="PaychartData" canvas2d="true" canvasId="canvasId2"/>
		</view>

		<view class="charts-text">
			地市结算占比
		</view>
		<view class="charts-box">
			<qiun-data-charts type="ring" :opts="opts1" :chartData="ringChartData" canvas2d="true" canvasId="canvasId3"/>
		</view>

		<view class="charts-text">
			安全交底与工程日志
		</view>
		<u-collapse :value="[]">
			<u-collapse-item name="1" title="协作单位交底数量">
				<u-cell-group>
					<u-cell v-for="(item,index) in companysafedata" :key="index" :title="item.x"
						:value="item.y"></u-cell>
				</u-cell-group>
			</u-collapse-item>
			<u-collapse-item name="2" title="协作单位日志数量">
				<u-cell-group>
					<u-cell v-for="(item,index) in dailydatac" :key="index" :title="item.x"
						:value="item.y"></u-cell>
				</u-cell-group>
			</u-collapse-item>
			<u-collapse-item name="3" title="施工队交底数量">
				<u-cell-group>
					<u-cell v-for="(item,index) in workteamsafedata" :key="index" :title="item.x"
						:value="item.y"></u-cell>
				</u-cell-group>
			</u-collapse-item>
			<u-collapse-item name="4" title="施工队日志数量">
				<u-cell-group>
					<u-cell v-for="(item,index) in dailydataw" :key="index" :title="item.x"
						:value="item.y"></u-cell>
				</u-cell-group>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	import {
		getuser,
		getMenu,
		getbuildcount,
		IncomeByCity,
		todocount,
		sendwxmsg,
		PayByCity,
		SafeByCompany,
		DailyByCompany
	} from '@/common/api.js';
	export default {
		data() {
			return {
				minDate: `${(new Date().getFullYear())-1}-1-1`,
				defaultDate: [`${year}-${month}-${date}`],
				// maxDate:new Date().getFullYear()+"-"+new Date().getMonth()+1+"-"+new Date().getDay()+1,
				start: '',
				end: '',
				start2: `${new Date().getFullYear()}-1-1`,
				end2: `${new Date().getFullYear()}-12-31`,
				showspan: false,
				ismonth: true,
				year: new Date().getFullYear(),
				month: new Date().getMonth() + 1,
				todocounts: {},
				code: "",
				// pathmy: "pages/example/components",
				buildcount: {},
				env: "app",
				mapurl: "",
				show: false,
				showCharts: false,
				value1: Number(new Date()),
				user: JSON.parse(uni.getStorageSync("$userinfo")),
				isShow: true,
				// 本年结算情况
				IncomechartData: {},
				// 本年劳务结算情况
				PaychartData: {},
				// 地市结算占比
				ringChartData: {},
				// 施工队交底数量
				workteamsafedata: [],
				// 协作单位交底数量
				companysafedata: [],
				// 施工队日志数量
				dailydataw: [],
				// 协作单位日志数量
				dailydatac: [],
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					// echartsH5: true,
					fontSize: 14,
					// enableScroll: true,		
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						axisLine: false,
						disabled: true,
					},
					extra: {
						bar: {
							type: "group",
							// width: 30,
							// meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 3,
							seriesGap: 1
						}
					}
				},
				opts1: {
					subtitle: {
						name: " ",
					},
					title: {
						name: " ",
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 5,
							border: true,
							borderWidth: 2,
							borderColor: "#FFFFFF"
						},
					}
				},

			}
		},
		onShow() {
			this.getbuildcount()
			this.getServerData()
		},
		methods: {
			getServerData() {
				setTimeout(() => {
					PayByCity(this.start2, this.end2).then(res => {
						let chartsCity = {
							categories: [],
							series: [{
								name: "金额(元)",
								data: [],
							}]
						}
						let t = res.sort((a, b) => b.y - a.y);
						t.forEach(e => {
							chartsCity.categories.push(e.x)
							chartsCity.series[0].data.push(e.y.toFixed(2))
						})
						this.PaychartData = JSON.parse(JSON.stringify(chartsCity));
					})

					IncomeByCity(this.start2, this.end2).then(res => {
						let chartsCity = {
							categories: [],
							series: [{
								name: "金额(元)",
								data: []
							}]
						}
						let ringCharts = {
							series: [{
								data: []
							}]
						}
						let t = res.sort((a, b) => b.y - a.y);
						t.forEach(e => {
							ringCharts.series[0].data.push({
								name: e.x,
								value: e.y
							})
						})
						t.forEach(e => {
							chartsCity.categories.push(e.x)
							chartsCity.series[0].data.push(e.y.toFixed(2))
						})
						this.IncomechartData = JSON.parse(JSON.stringify(chartsCity));
						this.ringChartData = JSON.parse(JSON.stringify(ringCharts));
					})

					SafeByCompany(this.start2, this.end2, '施工队').then(res => {
						var arr = res.sort((a, b) => b.y - a.y)
						arr.forEach((e) => {
							e.x = e.x.replace("广西", "").replace("有限公司", "").replace("壮族自治区", "")
							e.y = String(e.y)
						});
						this.workteamsafedata = arr;
					})

					SafeByCompany(this.start2, this.end2, '协作单位').then(res => {
						var arr = res.sort((a, b) => b.y - a.y)
						arr.forEach((e) => {
							e.x = e.x.replace("广西", "").replace("有限公司", "").replace("壮族自治区", "")
							e.y = String(e.y)
						});
						this.companysafedata = arr
					})

					DailyByCompany(this.start2, this.end2, '施工队').then(res => {
						var arr = res.sort((a, b) => b.y - a.y)
						arr.forEach((e) => {
							e.x = e.x.replace("广西", "").replace("有限公司", "").replace("壮族自治区", "")
							e.y = String(e.y)
						});
						this.dailydataw = arr
					})
					DailyByCompany(this.start2, this.end2, '协作单位').then(res => {
						var arr = res.sort((a, b) => b.y - a.y)
						arr.forEach((e) => {
							e.x = e.x.replace("广西", "").replace("有限公司", "").replace("壮族自治区", "")
							e.y = String(e.y)
						});
						this.dailydatac = arr
					})
				}, 200)
			},
			
			goimage()
			{
				this.submsg()
				uni.switchTab({
					url:"/pages/index/buildimages"
				})
			},
			
			confirmspan(e) {
				this.start = e[0]
				this.end = e[e.length - 1]
				this.showspan = false
			},
			confirmCharts(e) {
				this.start2 = e[0]
				this.end2 = e[e.length - 1]
				this.getServerData()
				this.showCharts = false
			},
			getbuildcount() {
				getbuildcount(this.start, this.end, this.year, this.month).then(res => {
					this.buildcount = res
					// console.log(this.buildcount);
					// console.log(this.buildcount['在建工程 + "," + this.buildcount.在建工程)
				})
			},
			changeismonth() {
				this.ismonth = !this.ismonth
				if (!this.ismonth) {
					this.showspan = true
					// this.year=0
					// this.month=0
				} else {
					this.year = new Date().getFullYear()
					this.month = new Date().getMonth() + 1
					this.start = this.end = ''
				}
				this.getbuildcount()
			},
			confirm(e) {
				const timeFormat = uni.$u.timeFormat
				var t = timeFormat(e.value, 'yyyy-mm')
				this.year = t.split('-')[0]
				this.month = t.split('-')[1]
				this.getbuildcount()
				this.show = false
			},
			submsg()
			{
				if(!wx.requestSubscribeMessage)
				return
				wx.requestSubscribeMessage({
				  tmplIds: ['g4ZLePoinaX5DPKwRPgBCx15-KfF9F6CuqglDaZp06o','87hkQwY_d1P2s9t-2sOcP5kru3uNQuw53bdJosg043o'],
				  success (res) { 
					  // console.log(res)
					  // uni.navigateTo({
					  // 	url: url
					  // })
				  },
				  fail (res) {
				  					  console.log(res)
				  },
				})
			},
			getsubmsg()
			{
				if(!wx.getSetting)
				return
				wx.getSetting({
				  withSubscriptions: true,
				  success (res) {
				    console.log(res.authSetting)
				    // res.authSetting = {
				    //   "scope.userInfo": true,
				    //   "scope.userLocation": true
				    // }
				    console.log(res.subscriptionsSetting)
				    // res.subscriptionsSetting = {
				    //   mainSwitch: true, // 订阅消息总开关
				    //   itemSettings: {   // 每一项开关
				    //     SYS_MSG_TYPE_INTERACTIVE: 'accept', // 小游戏系统订阅消息
				    //     SYS_MSG_TYPE_RANK: 'accept'
				    //     zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: 'reject', // 普通一次性订阅消息
				    //     ke_OZC_66gZxALLcsuI7ilCJSP2OJ2vWo2ooUPpkWrw: 'ban',
				    //   }
				    // }
				  }
				})
			},
		}
	}
</script>

<style>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.charts-text {
		font-size: 16px;
		margin-top: 5px;
	}
	
	.index-blick-title{
		display: flex;
	}
	
	.index-gird-item{
		width:110px;
		height:60px;
		line-height: 25px;
	}	
	.index-gird-box{
		border-bottom-width: 0.5px ;
		border-color: #dadbde ;
		border-bottom-style: solid;
	}
</style>